<!--新增功能，上半部分表单-->
<template>
  <dir class="pictureUpload-box">
    <div v-if="imagesurlstr" v-viewer :src="[imagesurlstr]">
      <div v-if="isPdf === 'pdf'">
        <i class="iconfont iconpdf" />
        <p>{{ fileName }}</p>
      </div>
      <el-image
        v-else
        style="width: 100px; height: 100px;"
        fit="cover"
        :src="imagesurlstr"
      />
      <div class="pdfright">
        <!-- <div> -->
        <div v-if="isPdf === 'pdf'">
          <el-button
            size="mini"
            type="text text-primary"
            @click.stop="previewpdf"
            >预览</el-button
          >
        </div>
        <div class="reset">
          <el-upload
            action="string"
            :show-file-list="false"
            :accept="imageLimit"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
            :http-request="toRequest"
            fit="scale-down"
          >
            <el-button size="mini" type="text text-primary">重新上传</el-button>
          </el-upload>
        </div>

        <!-- </div> -->
      </div>
    </div>
    <div v-else>
      <el-upload
        class="dialog-upload"
        action="string"
        :show-file-list="false"
        :accept="imageLimit"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeUpload"
        :http-request="toRequest"
        fit="scale-down"
      >
        <div class="tip-box">
          <div class="tip-uplader">
            <i class="el-icon-plus avatar-uploader-icon" />
          </div>
          <!-- <p class="tip-font">（支持PDF/JPG/PNG格式，4M以内）</p> -->
        </div>
      </el-upload>
    </div>
  </dir>
</template>

<script>
import {fileUpload} from '../../const/api.js'
import {fitType} from '../../const/common.js'
import {without} from 'lodash'
import {setImmediate} from 'timers'
// 文件上传限制 ------- 图片类型
// const imageLimit = '.pdf,.png,.jpg'
export default {
  name: 'PictureUpload',
  props: {
    // 接收默认url
    imgsrc: {
      type: String,
      default: () => ''
    },
    // 接收多张
    imgsrcarr: {
      type: Array,
      default: () => []
    },
    // 跟单独调用没有关系，该值为了配合表单组件使用
    keystr: {
      type: String,
      default: () => ''
    },
    // 类型
    uptype: {
      type: String,
      default: () => ''
    },
    imageLimit: {
      type: String,
      default: () => '.pdf,.png,.jpg'
    },
    imageSize: {
      type: Number,
      default: () => 11
    }
  },
  data() {
    return {
      isPdf: '',
      fileName: '',
      // 类型
      type: this.uptype || '',
      // 该值为了配合表单组件使用
      key: this.keystr || '',
      // 图片填充行为
      fitType,
      // 上传的地址
      uploadUrl: fileUpload,
      // 多张上传的图片地址
      imagesurlarr: this.imgsrcarr || [],
      // 单张
      imagesurlstr: this.imgsrc || ''
    }
  },

  methods: {
    // pdf预览
    previewpdf() {
      this.$pdfViewer({url: this.imagesurlstr, title: 'PDF预览'})
    },
    // 上传图片成功 本地图片地址
    handleAvatarSuccess(res, file) {
      this.localImgurl = URL.createObjectURL(file.raw)
      this.$emit('uploadPIC', 'ASDAS')
    },
    chuan() {
      this.$emit('zichuan', 'asdasd')
    },

    // 点击上传
    beforeUpload(file) {
      // this.uploadActon(file)
    },
    toRequest(dataA) {
      const isJPG = this.imageLimit.includes(
        dataA.file.name.replace(/.+\./, '').toLowerCase()
      )
      if (!isJPG) {
        this.$message.error('上传证照只能是' + this.imageLimit + '格式!')
        return false
      }
      const isLt2M = dataA.file.size / 1024 / 1024 < this.imageSize
      if (!isLt2M) {
        this.$message.error('上传证照大小不能超过' + this.imageSize + 'MB!')
        return false
      }
      // // 发起请求
      let fd = new FormData()
      fd.append('file', dataA.file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: {'Content-Type': 'multipart/form-data'},
        data: fd
      }).then(res => {
        this.$message({type: 'success', message: '上传成功', duration: 1000})
        // 赋值上传后的地址给文档
        // if (this.type === '1') {
        //   this.imagesurlarr.push(res.data.payload)
        //   this.$emit('ReturnImgUrl', this.imagesurl, this.key)
        // } else {
        this.imagesurlstr = res.data.payload
        this.$emit('ReturnImgUrl', this.imagesurlstr, this.key)
        this.$emit(
          'ReturnImgName',
          dataA.file.name.split('.')[0],
          this.imagesurlstr,
          this.key
        )
        this.fileName = dataA.file.name
        this.isPdf = dataA.file.name.replace(/.+\./, '').toLowerCase()
        // }
      })
    }
  },

  watch: {
    imgsrc: {
      immediate: true,
      handler(val) {
        this.imagesurlstr = val
      }
    },
    imageLimit: {
      immediate: true,
      handler(val) {
        this.imageLimit = val
      }
    },
    imageSize: {
      immediate: true,
      handler(val) {
        this.imageSize = Number(val)
      }
    }
  }
}
</script>

<style lang="less">
.pictureUpload-box {
  padding: 0;

  .dialog-upload {
    width: 100px;
    // float: left;
    height: 100px;
    display: inline-block;
    align-items: center;
    justify-content: center;

    .el-image {
      width: 100px;
      height: 100px;
    }

    .tip-box {
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .tip-uplader {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #cdd2dc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .el-input {
    width: 211px;
  }
  .iconfont {
    font-size: 30px;
  }
  .pdfright {
    padding-top: 2px;
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
